<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>天气查看 - AI 智享生活管家</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
    <link href="../css/custom.css" rel="stylesheet">
</head>
<body class="bg-gray-50">
    <!-- 状态栏 -->
    <div class="status-bar">
        <img src="../images/status-bar.png" alt="状态栏" class="w-full h-full object-cover">
    </div>

    <!-- 内容区域 -->
    <div class="content-area">
        <!-- 顶部导航 -->
        <nav class="px-4 py-2 flex items-center border-b">
            <a href="features.html" class="text-gray-600">
                <i class="fas fa-chevron-left text-xl"></i>
            </a>
            <h1 class="flex-1 text-center font-semibold">天气查看</h1>
            <button class="text-gray-600">
                <i class="fas fa-ellipsis-h text-xl"></i>
            </button>
        </nav>

        <!-- 定位信息 -->
        <div class="px-4 py-3 flex items-center justify-between">
            <div class="flex items-center">
                <i class="fas fa-map-marker-alt text-gray-400"></i>
                <span class="ml-2">北京市海淀区</span>
            </div>
            <button class="text-blue-500 text-sm">切换城市</button>
        </div>

        <!-- 今日天气 -->
        <div class="px-4 pt-6">
            <div class="bg-gradient-to-br from-blue-400 to-blue-600 rounded-xl p-6 text-white">
                <div class="text-center">
                    <i class="fas fa-cloud-sun text-6xl mb-4"></i>
                    <h2 class="text-4xl font-semibold">23°</h2>
                    <p class="mt-2 text-lg">晴转多云</p>
                    <div class="mt-4 flex justify-center space-x-8">
                        <div>
                            <p class="text-sm opacity-90">湿度</p>
                            <p class="mt-1">65%</p>
                        </div>
                        <div>
                            <p class="text-sm opacity-90">风速</p>
                            <p class="mt-1">3级</p>
                        </div>
                        <div>
                            <p class="text-sm opacity-90">空气质量</p>
                            <p class="mt-1">优</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- 24小时预报 -->
        <section class="mt-6 px-4">
            <h3 class="text-lg font-semibold mb-4">24小时预报</h3>
            <div class="flex space-x-4 overflow-x-auto pb-4">
                <div class="flex-shrink-0 text-center">
                    <p class="text-sm text-gray-500">现在</p>
                    <i class="fas fa-cloud-sun text-xl text-blue-500 my-2"></i>
                    <p class="font-medium">23°</p>
                </div>
                <div class="flex-shrink-0 text-center">
                    <p class="text-sm text-gray-500">14:00</p>
                    <i class="fas fa-cloud text-xl text-gray-400 my-2"></i>
                    <p class="font-medium">24°</p>
                </div>
                <!-- 更多时间点... -->
            </div>
        </section>

        <!-- 一周预报 -->
        <section class="mt-6 px-4">
            <h3 class="text-lg font-semibold mb-4">一周预报</h3>
            <div class="space-y-4">
                <div class="flex items-center justify-between">
                    <span>今天</span>
                    <div class="flex items-center space-x-4">
                        <i class="fas fa-cloud-sun text-blue-500"></i>
                        <span>23° / 15°</span>
                    </div>
                </div>
                <div class="flex items-center justify-between">
                    <span>明天</span>
                    <div class="flex items-center space-x-4">
                        <i class="fas fa-cloud text-gray-400"></i>
                        <span>22° / 14°</span>
                    </div>
                </div>
                <!-- 更多天数... -->
            </div>
        </section>
    </div>
</body>
</html> 
